<template>
	<view class="contain">
		<!-- 搜索框 -->
		<view class="header">
			<van-icon name="arrow-left" @click="huiSy()"/>
			<van-search style="width: 700rpx;" :value="value" @change="onChange1" shape="round" background="white" placeholder="请输入搜索关键词" />
		</view>
		
		<view >
			<button class="button1" @click="search1">搜索</button>
		</view>
		<!-- 综合排序 -->
		<view class="title">
			<van-tabs :active="active" @change="onChange">
				<van-tab title="综合排序"   >
					<view  class="goods" >
						<view v-for="(item,index) in shopplist" :key="index" @click="jump(item)">
							<view>
								<image :src="item.commodityImg" class="img1"></image>
							</view>
							
							<view>
								<text class="text1">{{item.commodityName}}</text>
							</view>
							
							<view style="margin-top: 5rpx;">
								<van-tag color="red" plain>99新</van-tag>
								<van-tag color="red" plain style="margin-left: 40rpx;">无任何拆修</van-tag>
							</view>
							
							<view style="margin-top: 20rpx; display: flex;">
								<text style="color: red; ">￥{{item.currentPrice}}</text>
								<text style="text-decoration: line-through; color: gray; margin-left: 12rpx;">￥{{item.originalPrice}}</text>
								<text class="address1">{{item.address}}</text>
							</view>
						</view>	
					</view>
				</van-tab>



				<van-tab title="信用" >
					<view  class="goods">
						<view v-for="(item,index) in shopplist" :key="index" @click="jump(item)">
							<view>
								<image :src="item.commodityImg" class="img1"></image>
							</view>
							
							<view>
								<text class="text1">{{item.commodityName}}</text>
							</view>
							
							<view style="margin-top: 5rpx;">
								<van-tag color="red" plain>99新</van-tag>
								<van-tag color="red" plain style="margin-left: 40rpx;">无任何拆修</van-tag>
							</view>
							
							<view style="margin-top: 20rpx; display: flex; justify-content: space-between;">
								<text style="color: red;">￥{{item.currentPrice}}</text>
								<text style="text-decoration: line-through; color: gray; margin-left: 12rpx;">￥{{item.originalPrice}}</text>
								<text class="address1">{{item.address}}</text>
							</view>
						</view>	
					</view>
				</van-tab>
				
				
				<van-tab title="价格">
					
					<view  class="goods">
						<view v-for="(item,index) in shopplist" :key="index" @click="jump(item)">
							<view>
								<image :src="item.commodityImg" class="img1"></image>
							</view>
							
							<view>
								<text class="text1">{{item.commodityName}}</text>
							</view>
							
							<view style="margin-top: 5rpx;">
								<van-tag color="red" plain>99新</van-tag>
								<van-tag color="red" plain style="margin-left: 40rpx;">无任何拆修</van-tag>
							</view>
							
							<view style="margin-top: 20rpx; display: flex; justify-content: space-between;">
								<text style="color: red;">￥{{item.currentPrice}}</text>
								<text style="text-decoration: line-through; color: gray; margin-left: 10rpx;">￥{{item.originalPrice}}</text>
								<text class="address1">{{item.address}}</text>
							</view>
						</view>	
					</view>
					
				</van-tab>
				
			</van-tabs>
		</view>
	</view>
</template>

<script>
	import request from '../../com/request.js'
	export default {
		data() {
			return {
				value: '',//搜索框值
				active: 0, //标签页切换的值
				goodsArr:[] ,//搜索页商品数组
				pagestart:0, //数据开始地方
				pagesize:6,//一页有几条
				pagenum:1,//数据总页数
				pagecount:0,//数据总条数
				shopplist:[]
			}
		},
		methods: {
			// 标签页切换
			onChange(event) {
				this.active=`${event.detail.name}`
				console.log(this.active,80)
				this.shopplist=[]  //数组清空
				this.pagenum = 1;  //页码置为第一页
				// 获取商品信息
				this.getAllgoods()
			    
			  },
			  // 搜索框的值
			   onChange1(e) {
				  this.value = e.detail
				},
				
			// 获取商品信息
			getAllgoods(){
				var that=this
				// this.shopplist=[]
				request({
					url:"api/commodityTable1/get", 
					data:{
						index:this.active,
						start:(this.pagenum-1)*this.pagesize,
						size:this.pagesize,
						search:this.value
					},
					method:"GET",
					dataType:"json",
					success:function(resp){
						console.log(resp.data.data,81)
						// 如果没搜索到 显示
						if(resp.data.num==0){
							uni.showToast({
								title: '没有找到',
								duration:500,
								icon:"none"
							});
						}
						that.pagecount=resp.data.num  //数据总条数
						var arr1=resp.data.data
						var arr2=that.shopplist
						arr1=arr2.concat(arr1)  //合并两个数据内容
						that.shopplist=arr1
						console.log(that.shopplist,114)
					},
					
				})
			},
			
			// 懒加载
			onReachBottom: function() { //触底开始下一页
			var that = this
			var pagenum= that.pagenum+1; //获取当前页数并+
			
			var allpage=Math.ceil(that.pagecount/that.pagesize)
			
			if(that.pagenum<allpage){
				that.pagenum = pagenum, //更新当前页数
				that.getAllgoods();//重新调用请求获取下一页数据
				
			}else{
				uni.showToast({
					title: '没有更多',
					duration:500,
					icon:"none"
				});
			}
		},
			
			// 搜索
			search1(){
				// console.log(this.value,166)
				this.active=-1
				this.shopplist=[]  //数组清空
				this.pagenum = 1;  //页码置为第一页
				this.getAllgoods()	
			},
			
			// 跳转详情页
			jump(item){
				console.log(item,191)
				uni.setStorageSync('hx220408commodityId', item.commodityId);
				uni.setStorageSync('hx220408userTel', item.userTel);
				
				uni.navigateTo({
				  url:"/pages/goods/goods",
				})
			},
			
			// 跳首页
			huiSy(){
				uni.redirectTo({
				  url:"/pages/index/index",
				})
			}

		},
		onLoad(){
			this.getAllgoods()
		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.contain {
		width: 100%;
		margin-top: 160rpx;
		/* border: 1px solid darkgray; */
	}

	/* 搜索框 */
	.header {
		display: flex;
	}
	
	/* 按钮 */
	.button1{
		position: absolute;
		top: 188rpx;
		left:557rpx;
		width: 20%;
		height: 50rpx;
		line-height: 52rpx;
		border-top-right-radius: 29%;
		border-bottom-right-radius: 29%;
		z-index:999  /* 层级*/
		
	}
	/* 伪元素 */
	.button1::after{
		border: none;
	}

	/* 综合排序 */
	.title {
		margin-top: 15rpx;

	}

	/* 商品展示 */
	.goods {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;

	}

	.goods>view{
		width: 40%;
		margin-top: 25rpx;
		margin-left: 50rpx;
		border: 1px solid darkgrey;
	}

	/* 商品图片 */
	.img1 {
		width: 100%;
		height: 280rpx
	}
	
	.address1{
		color: orange;
		margin-left: 24rpx;
		font-size: 27rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	/* 文字溢出隐藏 */
	.text1{
		display: -webkit-box;
		width: 300rpx;
		overflow: hidden;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		text-overflow: ellipsis;
	}
		
</style>
